<template>
  <div class="app-container" v-if="list">
    <div style="border: 1px solid #dcdcdc;padding: 20px;margin-bottom: 20px;">
      <el-steps :active="list.status" finish-status="success">
        <el-step title="竞拍成功" :description="list.created_at" />
        <el-step title="买家付款" :description="list.pay_success_at" />
        <el-step title="拍品上拍" :description="list.emmanuelle_at" />
        <el-step title="拍品成交" />
      </el-steps>
    </div>

    <el-row :gutter="20">
      <el-col :xs="24" :sm="12">
        <el-card class="box-card">
          <div slot="header">订单信息</div>
          <div style="font-size: 14px;">
            <span style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;">订单状态</span>
            <span v-if="list.lock_end_at">
              {{list.order_status}}
            </span>
            <span v-else>
              {{list.status == 0 ? "待支付" : list.status == 1 ? "待发货" : list.status == 2 ? "待收货" : list.status == 3 ? "已完成" : list.status == 4 ? "锁定期" : list.status == 5 ? "拍卖中-首次上架" : list.status == 6 ? "拍卖中-流拍" : list.status == 7 ? "拍卖中-支付逾期" : list.status == 8 ? "拍卖中-重新上架" : list.status == 9 ? "已成交" : list.status == 10 ? "退款完成" : list.status == 11 ? "退货" : list.status == 12 ? "退货中" : ""}}
            </span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;">锁定截止</span>
            <span>{{list.lock_end_at}}</span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;">订单编号</span>
            <span>{{list.order_no}}</span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;">交易编号</span>
            <span>{{list.transaction_no}}</span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;">订单类型</span>
            <span></span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;">支付方式</span>
            <span>{{list.pay_type == 1 ? "微信支付" : list.pay_type == 2 ? "支付宝" : list.pay_type == 3 ? "后台确认" : ""}}</span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;">卖家店铺</span>
            <span>{{list.shopping.name}}</span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;">店铺类型</span>
            <span>{{list.shopping.company_type == 0 ? "个体商户" : list.shopping.company_type == 1 ? "普通企业" : ""}}</span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;">交易服务费</span>
            <span>--</span>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-card class="box-card">
          <div slot="header">买家信息</div>
          <div style="font-size: 14px;">
            <span style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;">账号</span>
            <span>{{list.user.user}}</span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;">姓名</span>
            <span>{{list.user.name}}</span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;">收货人</span>
            <span v-if="list.receiving_address">{{list.receiving_address.recive_user}}</span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;">
            <span style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;">收货地址</span>
            <span
              v-if="list.receiving_address">{{list.receiving_address.province && list.receiving_address.province.length > 0 ? list.receiving_address.province[0].title : ""}}
              {{list.receiving_address.city && list.receiving_address.city.length > 0 ? list.receiving_address.city[0].title : ""}}
              {{list.receiving_address.country && list.receiving_address.country.length > 0 ? list.receiving_address.country[0].title : ""}}
              {{list.receiving_address.address}}</span>
          </div>
          <div style="font-size: 14px;margin-top: 10px;margin-bottom: 92px;">
            <span style="width: 100px;text-align: right;margin-right: 40px;display: inline-block;">联系方式</span>
            <span v-if="list.receiving_address">{{list.receiving_address.recive_mobile}}</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header">拍品信息</div>
          <el-table :key="tableKey" ref="table" v-loading="listLoading" :data="tableList" border fit highlight-current-row style="width: 100%;">
            <el-table-column label="拍品编号" prop="order_no" align="center" />
            <el-table-column label="拍品" align="center">
              <template slot-scope="{row}">
                <el-image style="width: 40px; height: 40px" v-if="row.product" :src="$store.state.settings.imgHost+row.product.image"
                  :preview-src-list="[$store.state.settings.imgHost+row.product.image]" />
                <span style="vertical-align: top;margin-left: 10px;" v-if="row.product">{{ row.product.name }}</span>
              </template>
            </el-table-column>
            <el-table-column label="拍品类型" align="center">
              <template slot-scope="{row}" v-if="row.product">{{row.product.type == 0 ? "首次上架" : row.product.type == 1 ? "续拍商品" : ""}}</template>
            </el-table-column>
            <el-table-column label="出价" align="center" prop="offer" />
            <el-table-column align="center" label="佣金" prop="commission" />
            <el-table-column align="center" label="实付" prop="real_pay" />
          </el-table>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {
    getOrdersDetail
  } from "@/api/common"

  export default {
    name: 'distributionsManageDetailFx',
    data() {
      return {
        tableKey: 0,
        list: null,
        tableList: [],
        listLoading: true
      }
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        getOrdersDetail(this.$route.params.id).then((res) => {
          this.list = res.data;
          this.tableList = [res.data];
        }).finally(() => {
          this.listLoading = false;
        })
      }
    }
  }
</script>

<style>
</style>
